<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>模拟下划线</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        /* width: 100px; */
        height:400px;
        margin:0 auto;
        display: flex;
    }
    .box>p:nth-child(1){
        text-decoration: underline;
    }
    .box>p:nth-child(2){
        border-bottom: 1px solid #000;
        display: inline;  /*换行后使每个字下都要border*/
    }
    .box>p:nth-child(3){
        background: linear-gradient(#000,#000) no-repeat;
        background-size: 100% 1px;
        background-position: 0 1.15rem;
        display: inline; /*换行后使每个字下都要background*/
        text-shadow: 0.1rem 0 #fff,-0.1rem 0 #fff;
    }
</style>

<body>
    <div class="box">
        <!-- text-decoration: underline; -->
        <p>abcgefg哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊1</p>
        <!-- border-bottom: 1px solid gray; -->
        <p>abcgefg哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊2</p>
        <!-- background: linear-gradient(gray,gray) no-repeat; -->
        <p>abcgefg哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊3</p>
    </div>
</body>

</html>